<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
	<title>Document</title>
	<!-- <link rel="stylesheet" href="css/sm.css"> -->
	<link href="css/toastr.css" rel="stylesheet" type="text/css">
	<script src='js/jquery-2.2.0.min.js'></script>
	<script src="js/toastr.min.js"></script>
</head>
<body>
	<div><p id="title">hello</p></div>
	<script>
		$(document).ready(function(){
			$("#title").click(function() {
				toastr.options = {
				  "closeButton": false,
				  "debug": false,
				  "newestOnTop": false,
				  "progressBar": false,
				  "positionClass": "toast-bottom-full-width",
				  "preventDuplicates": false,
				  "onclick": null,
				  "showDuration": "30000",
				  "hideDuration": "100000",
				  "timeOut": "500000",
				  "extendedTimeOut": "1000",
				  "showEasing": "swing",
				  "hideEasing": "linear",
				  "showMethod": "fadeIn",
				  "hideMethod": "fadeOut"
				}
				toastr.success('Have fun storming the castle!', 'Miracle Max Says')
			})
		});
	</script>

</body>
</html>